<template>
  <el-dialog title="新建产品" v-model="props.visible" @close="close">
    <el-divider></el-divider>
    <el-form ref="ruleFormRef" style="width: 93%;" :model="formData" :rules="rules" :label-width="200" status-icon>
      <el-form-item label="产品名称" prop="title">
        <el-input v-model="formData.title" placeholder="请输入产品名称"></el-input>
      </el-form-item>
      <el-form-item label="排序值" prop="sort">
        <el-input v-model="formData.sort" type="number" autocomplete="off" placeholder="请输入排序值"></el-input>
      </el-form-item>
      <el-form-item label="产品状态" prop="enable_sale">
        <el-select v-model="formData.enable_sale" placeholder="请选择产品状态">
          <el-option label="上架" :value="1"></el-option>
          <el-option label="下架" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="formData.price" type="number" autocomplete="off" placeholder="请输入价格"
          @input="handleInput"></el-input>
      </el-form-item>
      <el-form-item label="可用天数" prop="valid_days">
        <el-input v-model="formData.valid_days" type="number" autocomplete="off" placeholder="请输入可用天数"></el-input>
      </el-form-item>
      <el-form-item label="启动资金" prop="init_fund">
        <el-input v-model="formData.init_fund" type="number" autocomplete="off" placeholder="请输入启动资金"></el-input>
      </el-form-item>
      <el-form-item label="预期收益（仅展示作用）" prop="about_income_rate">
        <el-input v-model="formData.about_income_rate" type="number" autocomplete="off"
          placeholder="请输入预计收益"></el-input>
      </el-form-item>
      <el-form-item label="最低收益" prop="income_rate_min">
        <el-input v-model="formData.income_rate_min" type="number" autocomplete="off" placeholder="请输入最低收益"></el-input>
      </el-form-item>
      <el-form-item label="最高收益" prop="income_rate_max">
        <el-input v-model="formData.income_rate_max" type="number" autocomplete="off" placeholder="请输入最高收益"></el-input>
      </el-form-item>
      <el-form-item label="实际收益的金额（不能为0）" prop="settle_fund">
        <el-input v-model="formData.settle_fund" type="number" autocomplete="off" placeholder="请输入实际收益的金额"></el-input>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive, onMounted } from "vue";
import { validateInput } from "@/utils/index";
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object as any,
    default: () => { }
  }
});

const emit = defineEmits(['close', 'submit', 'update']);
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
  title: [
    { required: true, message: '请输入产品名称', trigger: 'blur' },
  ],
  sort: [
    { required: true, message: '请输入排序值', trigger: 'blur' },
  ],
  enable_sale: [
    {
      required: true,
      message: '请选择产品状态',
      trigger: 'change',
    },
  ],
  price: [
    {
      required: true,
      message: '请输入产品金额',
      trigger: 'blur',
    },
  ],
  valid_days: [
    {
      required: true,
      message: '请输入可用天数',
      trigger: 'blur',
    },
  ],
  init_fund: [
    { required: true, message: '请输入启动资金', trigger: 'blur' },
  ],
  about_income_rate: [
    { required: true, message: '请输入预计收益', trigger: 'blur' },
  ],
  income_rate_min: [
    { required: true, message: '请输入最低收益', trigger: 'blur' },
  ],
  income_rate_max: [
    { required: true, message: '请输入最高收益', trigger: 'blur' },
  ],
  settle_fund: [
    { required: true, message: '请输入实际收益的金额', trigger: 'blur' },
  ],
});

const formData = ref({
  title: "", // 商品标题
  sort: "", // 排序值，越大越靠前
  enable_sale: 2, // 1：上架；2：下架
  price: "", // 售价，保留小数后4位，可以为0
  valid_days: "", // 可用天数
  init_fund: "", // 启动资金，对用用户的相应余额进行冻结
  about_income_rate: "", // 预期收益，仅展示作用
  income_rate_min: "", // 最低收益
  income_rate_max: "", // 最高收益
  settle_fund: "", // 实际进行计算收益的金额，不能为0
});

// 
const close = () => {
  emit('close', false);
};

const handleInput = (event: any) => {
  let input = validateInput(event as string);
  const decimalIndex = input.indexOf(".");
  // 获取精度
  const decimals = 4
  if (decimalIndex !== -1) {
    const decimalPart = input.substring(decimalIndex + 1);
    if (decimalPart.length > decimals) {
      input = input.substring(0, decimalIndex + decimals + 1);
    }
  }

  // 更新输入框的值和数据模型
  formData.value.price = input;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (JSON.stringify(props.product) === '{}') {
        emit('submit', formData.value)
      } else {
        emit('update', formData.value)
      }
    }
  })
};

onMounted(() => {
  if (JSON.stringify(props.product) !== '{}') {
    formData.value = props.product
  }
})
</script>

<style></style>